<template>
	<view class="one-store">
		<view class="search_box" @click="isMask=false">
			<uni-easyinput class="search" type="text" placeholderStyle="font-size:28rpx;" @confirm="search"
				:inputBorder="false" @clear="clear" prefixIcon="search" @input="input" v-model="selectVo.keyword"
				placeholder="请输入提现单号"></uni-easyinput>
			<view class="search_btn" @click="search">
				搜索
			</view>
		</view>
		<view class="list_top" @click="isMask=false">
			<view class="filt_date" @click.stop="isMaskChange">
				{{statusList.filter(o=>o.value==selectVo.status)[0].text}}
				<view class="uniui-down1"></view><span
					style="color: #777;font-weight: 500;">(共{{withdrawalLogList.rows.length}}条)</span>
			</view>
			<view class="filt_date" @click="open()">
				<span
					style="color: #777777;">提现时间：</span>{{selectVo.dateType==4? selectVo.startTime==selectVo.endTime?selectVo.endTime: selectVo.startTime+'~'+selectVo.endTime:filtList[selectVo.dateType].title}}
				<view class="uniui-down1"></view>
			</view>
		</view>
		<view class="status_search" v-if="isMask">
			<view class="status_tag_pu">
				<view class="centent_tag">
					<view class="item_tag" @click="changeStatus(item.value)" v-for="item in statusList"
						:key="item.value">
						<span :style="{color:selectVo.status==item.value?'#007cff':'#000'}">{{item.text}}</span>
					</view>
				</view>
			</view>
			<view class="mack_back" @click="isMaskChange">
			</view>
		</view>
		<view class="scroll_content">
			<scroll-view class="scroll-view_list" :refresher-triggered="triggered" refresher-background="transparent"
				@refresherpulling="refresherpulling" refresher-enabled="true" scroll-y="true"
				@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
				<view v-if="withdrawalLogList.rows.length==0" class="void_goods">
					<image class="img" src="/static/goods.svg"></image>
					<view class="tip">暂无提现记录</view>
				</view>
				<checkbox-group class="order_list">
					<view class="order_list_item" @click="gologDetail(item.id)"
						v-for="(item,index) in withdrawalLogList.rows" :key="index">
						<view class="order_list_item_content">
							<view class="content_display">
								<span class="work_No_tip">
									提现单号：{{item.code}}
									<image @click.native.stop="copyText(item.code)" style="width: 30rpx;height: 30rpx;"
										src="/static/copy.svg" mode="aspectFit">
									</image>
								</span>
								<view class="status_tag">
									{{statusList.filter(o=>o.value==item.status)[0].text}}
								</view>
							</view>
							<view class="content_display">
								<span class="band_tip">提现到：{{item.band}}</span>
								<view class="money"
									:style="{color: item.status==1||item.status==2?'#e69103':item.status==5?'#f56c6c':'#000'}">
									<span style="font-size: 24rpx;">￥ </span>{{(item.receivedAmount||0).toFixed(2)}}
								</view>
							</view>
							<view class="content_display">
								<span class="band_tip">{{item.createTime}}</span>
							</view>
						</view>
					</view>
				</checkbox-group>
			</scroll-view>
		</view>
		<!-- 时间筛选-->
		<uni-popup ref="popup" border-radius="10px 10px 0 0" type="bottom">
			<view class="popup">
				<view class="popup_top">
					<view class="popup_top_title">
						选择时间
					</view>
					<uni-icons size="28" color="#ccc" type="clear" @click="onClose"></uni-icons>
				</view>
				<view class="list_muen">
					<view v-for="(item,index) in filtList" :key="index" @click="onClickState(item.value)"
						class="list_muen_item">
						<view class="list_muen_item_title" :class="dateType==item.value?'list_muen_item_isactive':''">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="range" :disabled="dateType!=4" rangeSeparator="至" type="daterange"
						@change="changeClick" />
				</view>
				<view class="footer_btn">
					<view class="footer_btn_reset" @click="onReset">
						重置
					</view>
					<view class="footer_btn_confirmation" @click="onConfirmation">
						确定
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		nextTick, onMounted
	} from "vue"
	import { onUnload, onLaunch, onLoad, onHide } from '@dcloudio/uni-app'
	import apiAccount from '@/util/network_api/account.js'
	import _ from "lodash";
	const triggered = ref(false)
	const popup = ref()
	const filtList = ref([{ title: '全部', value: 0 }, { title: '本周', value: 1 }, { title: '本月', value: 2 }, { title: '本年', value: 3 }, { title: '自定义范围', value: 4 }])
	// 提现状态
	const statusList = ref([
		{ text: '全部状态', value: 0 },
		{ text: '提现审核', value: 1 },
		{ text: '等待打款', value: 2 },
		{ text: '打款完成', value: 3 },
		{ text: '失败', value: 4 },
		{ text: '已驳回', value: 5 }
	])

	const copyText = (data) => {
		uni.setClipboardData({
			data: data,
			success() {
				uni.showToast({
					title: '已复制',
					icon: 'success',
				})
			}
		})
	}

	// 搜索
	const selectVo = ref({
		dateType: 0,//	时间类型：1-本周，2-本月，3-本年，4-自定义时间区间,示例值(1)
		endTime: '',
		startTime: '',
		"keyword": "",
		"limit": 0,
		"page": 0,
		"status": 0//提现状态：1-待审核，2-付款中，3-完成，4-失败，5-驳回，查询全部则传空值
	})
	const isMask = ref(false)
	const changeStatus = (val) => {
		selectVo.value.status = val
		isMask.value = false
		getWithdrawList()
	}
	// 切换状态选择隐藏
	const isMaskChange = () => {
		isMask.value = !isMask.value
	}
	const range = ref()
	const end_start_Time = ref([])
	const dateType = ref(1)
	const onClose = () => {
		popup.value.close()
	}
	// 重置
	const onReset = () => {
		dateType.value = 1
		end_start_Time.value = []
		range.value = ''
	}
	const onClickState = (value) => {
		dateType.value = value
	}

	const changeClick = (val) => {
		end_start_Time.value = val
	}
	const open = () => {
		dateType.value = selectVo.value.dateType
		popup.value.open()
	}
	// 确认
	const onConfirmation = () => {
		if (dateType.value === 5 && end_start_Time.value.length == 0) {
			uni.showToast({
				title: '请选择时间范围',
				icon: 'none'
			})
			return
		}
		selectVo.value.dateType = dateType.value
		if (dateType.value === 4) {
			selectVo.value.startTime = end_start_Time.value[0]
			selectVo.value.endTime = end_start_Time.value[1]
		} else {
			selectVo.value.startTime = ''
			selectVo.value.endTime = ''
		}
		getWithdrawList()
		popup.value.close()
	}

	const withdrawalLogList = ref({
		total: 0,
		rows: []
	})
	const clear = () => {
		selectVo.value.keyword = ''
		getWithdrawList()
	}
	const search = _.debounce(async () => {
		selectVo.value.keyword = selectVo.value.keyword.trim()
		selectVo.value.page=1
		uni.showLoading({
			title: '加载中...'
		})
		getWithdrawList()
	}, 500)
	const input = (n) => {
		if (!n) {
			search()
		}
	}
	// 获取列表
	const getWithdrawList = async () => {
		uni.showLoading({
			title: '加载中',
		});
		let data = _.cloneDeep(selectVo.value)
		data.dateType === 0 ? data.dateType = null : data.dateType = data.dateType
		data.status === 0 ? data.status = null : data.status = data.status
		apiAccount.getWithdrawRecordList(data).then(res => {
			uni.hideLoading()
			if (res.success) {
				if (withdrawalLogList.value.rows.length < withdrawalLogList.value.total &&selectVo.value.page > 1) {
					withdrawalLogList.value.rows = [...withdrawalLogList.value.rows, ...res.data.rows]
					withdrawalLogList.value.total = res.data.total
				} else {
					withdrawalLogList.value = res.data
					withdrawalLogList.value.total = res.data.total
				}
			}
		})
	}
	onLoad(async (e) => {
		if (e.status) {
			selectVo.value.status = Number(e.status)
		}
		getWithdrawList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 下拉刷新
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
		triggered.value = true
	}
	// 底部触发
	const scrolltolower = () => {
		if (withdrawalLogList.value.rows.length < withdrawalLogList.value.total) {
			selectVo.value.page += 1
			getWithdrawList()
		}
	}
	const onRefresh = async () => {
		selectVo.value.keyword = ''
		selectVo.value.page = 1
		await getWithdrawList()
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}
	// 提现记录详情
	const gologDetail = (id) => {
		uni.navigateTo({
			url: '/pages/pages_network/home/myAccount/WithdrawalLogDetail?id=' + id
		})
	}
</script>

<style lang="scss" scoped>
	.one-store {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;

		.search_box {
			display: flex;
			align-items: center;
			// width: 100%;
			padding: 24rpx;
			background-color: #fff;

			:deep(.uni-easyinput__content) {
				background-color: #f3f4f8 !important;
				border-radius: 50rpx;
			}

			.search {
				flex: 1;
				padding: 0 12rpx;
			}

			.search_btn {
				font-size: 28rpx;
				font-weight: bold;
				color: #007cff;
				margin-left: 12rpx;
			}
		}

		.list_top {
			display: inline-block;
			padding: 16rpx 32rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.filt_date {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				padding: 12rpx 0;

				.uniui-down1 {
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 12rpx solid #000;
					margin-left: 8rpx;
					margin-top: 4rpx;
				}
			}
		}

		.status_search {
			position: absolute;
			top: 190rpx;
			width: 100%;

			.status_tag_pu {
				position: absolute;
				top: 0rpx;
				width: 100%;
				z-index: 3;
				box-sizing: border-box;
				// padding: 24rpx;
				box-sizing: border-box;

				.centent_tag {
					display: flex;
					background-color: #FFFFFF;

					justify-content: space-evenly;
					padding: 24rpx;
					position: relative;

					.item_tag {
						border: 1px solid #EBEEF5;
						font-size: 28rpx;
						padding: 12rpx 20rpx;
					}

					&::after {
						position: absolute;
						content: '';
						top: -12rpx;
						left: 10%;
						width: 0;
						height: 0;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid transparent;
						border-bottom: 12rpx solid #fff;
					}
				}
			}

			.mack_back {
				position: absolute;
				top: 0;
				background-color: rgba(0, 0, 0, 0.4);
				width: 100%;
				box-sizing: border-box;
				z-index: 2;
				height: 100vh;
			}
		}


		.scroll_content {
			height: 100%;
			flex: 1;
			overflow: hidden;

			.scroll-view_list {

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}

				height: 100%;
				box-sizing: border-box;

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 50vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}

				.order_list {
					margin: 16rpx 24rpx;
					box-sizing: border-box;
					background-color: fafafa;
					padding-bottom: 300rpx;

					&_item {
						background-color: #FFFFFF;
						// margin-bottom: 24rpx;
						padding: 24rpx;

						&~.order_list_item {
							border-top: 2rpx solid #eee;
						}

						&_content {
							display: flex;
							flex-direction: column;
							gap: 12rpx;

							.content_display {
								font-size: 28rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.work_No_tip {
									color: #000;
									font-size: 28rpx;
									font-weight: bold;
								}

								.status_tag {
									color: #000;
									font-size: 24rpx;
								}

								.band_tip {
									color: #777;
									font-size: 24rpx;
								}

								.money {
									font-weight: bold;
									font-size: 30rpx;
								}
							}
						}


					}

				}
			}
		}
	}

	.popup {
		height: 600rpx;
		background-color: #fff;
		padding: 22rpx 24rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;

		&_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&_title {
				font-weight: bold;
				font-size: 28rpx;
			}
		}

		.list_muen {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			&_item {
				width: calc(100%/3);
				display: flex;
				align-items: center;
				justify-content: center;

				&_title {
					background: rgba(238, 238, 238, 1);
					margin: 20rpx;
					width: 80%;
					padding: 14rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					border-radius: 10rpx;
				}

				&_isactive {
					background-color: #007cff;
					color: #fff;
				}
			}
		}

		.example-body {
			margin: 40rpx 20rpx;

			&_tip {
				color: rgba(245, 108, 108, 1);
				font-size: 24rpx;
				margin: 20rpx 0;
			}
		}

		.footer_btn {
			display: flex;
			align-items: center;
			padding: 50rpx 40rpx 40rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;

			&_reset {
				height: 80rpx;
				color: #007cff;
				background: rgba(242, 249, 255, 1);
				width: 26%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&_confirmation {
				height: 80rpx;
				color: #fff;
				background-color: #007cff;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 32rpx;
			}
		}
	}
</style>